import React, { Component } from "react";
// 高阶组件本质是一个函数
// 接受一个组件作为参数，并且返回一个新组件

// 高阶组件的作用还是封装和复用
// 高阶组件可以增加相同html模板,增加相同的属性等等
// 高阶组件就是用来增强组件的功能的

const hoc = (Comp) => {
  return class extends Component {
    render() {
      return (
        <>
          {/* {...this.props}相当于是将所有接受到的属性全部往下传递 */}
          <Comp name="tom" {...this.props}></Comp>
          {/* <footer>@千锋教育</footer> */}
        </>
      );
    }
  };
};

const Child = hoc((props) => {
  console.log(props);
  return <div>这是child子组件 - {props.name}</div>;
});

// const Child2 = hoc(Child);

// class Child extends Component {
//   render() {
//     console.log(this.props);
//     return <div>这是child子组件 - {this.props.name}</div>;
//   }
// }

// const Child2 = hoc(Child);

class App extends Component {
  render() {
    return (
      <>
        <h2>高阶组件</h2>
        <Child count="10" age="100" />
      </>
    );
  }
}

export default App;
